<template>
  <div class="edit_container" style="height:300px">
    <quill-editor
      style="height:200px"
      v-model="contentText"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  props: {
    content: {
      type: String || Object,
      default: ""
    }
  },
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {},
      contentText: "",
    };
  },
  created() {},
  watch: {
    content: {
      handler(newValue, oldValue){
        if (!newValue) {
          this.contentText = newValue
        }
      },
      immediate: true // 初始化监听
    }
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(content) {
      // console.log(content.text.substr(0, content.text.length - 1).split());
      this.$emit('update:content', content.text.substr(0, content.text.length - 1))
} // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>
